<template>
  <div id="app" :style="{'padding-bottom':showPlay?'60px':'0px'}">
    <TopNav v-if="!$route.meta.hideHead"></TopNav>
    <Play :songList="songList" v-show="showPlay" :showPlay="showPlay"></Play>
    <router-view @play="playMusic" @playMv="playMv"></router-view>
  </div>
</template>

<script>
import Play from '@/components/Play'
import TopNav from '@/components/TopNav'
export default {
  data(){
    return {
      songList:null,
      showPlay: true
    }
  },
  components:{
    TopNav,
    Play
  },
  methods:{
    playMusic(e){
      this.songList = e;
    },
    playMv(e){
      this.showPlay = !e;
    }
  }
}
</script>

<style>
#app {
  padding-bottom: 60px;
}
</style>
